<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名" />
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 显示的数据 -->
                    <div :style='样式1'>
                        <h4>显示的数据 : </h4>
                        <spen :style='样式2'>英:data,类型:array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.data'
                            size='small'></el-radio-group></div>
                    <!-- Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 -->
                    <div :style='样式1'>
                        <h4>Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的
                            style.height 的值，Table 的高度会受控于外部样式。 : </h4>
                        <spen :style='样式2'>英:height,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.height' size='small'>
                            <el-radio label="100px">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Table 的最大高度。 合法的值为数字或者单位为 px 的高度。 -->
                    <div :style='样式1'>
                        <h4>Table 的最大高度。 合法的值为数字或者单位为 px 的高度。 : </h4>
                        <spen :style='样式2'>英:max_height,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.max_height' size='small'>
                            <el-radio label="150px">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否为斑马纹 table -->
                    <div :style='样式1'>
                        <h4>是否为斑马纹 table : </h4>
                        <spen :style='样式2'>英:stripe,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.stripe' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否带有纵向边框 -->
                    <div :style='样式1'>
                        <h4>是否带有纵向边框 : </h4>
                        <spen :style='样式2'>英:border,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.border' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- Table 的尺寸 -->
                    <div :style='样式1'>
                        <h4>Table 的尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'>
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 列的宽度是否自撑开 -->
                    <div :style='样式1'>
                        <h4>列的宽度是否自撑开 : </h4>
                        <spen :style='样式2'>英:fit,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fit' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示表头 -->
                    <div :style='样式1'>
                        <h4>是否显示表头 : </h4>
                        <spen :style='样式2'>英:show_header,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_header' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否要高亮当前行 -->
                    <div :style='样式1'>
                        <h4>是否要高亮当前行 : </h4>
                        <spen :style='样式2'>英:highlight_current_row,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.highlight_current_row'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当前行的 key，只写属性 -->
                    <div :style='样式1'>
                        <h4>当前行的 key，只写属性 : </h4>
                        <spen :style='样式2'>英:current_row_key,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.current_row_key'
                            size='small'></el-radio-group></div>
                    <!-- 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 -->
                    <div :style='样式1'>
                        <h4>行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 : </h4>
                        <spen :style='样式2'>英:row_class_name,类型:function({ row, rowIndex }) / string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_class_name'
                            size='small'></el-radio-group></div>
                    <!-- 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 -->
                    <div :style='样式1'>
                        <h4>行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 : </h4>
                        <spen :style='样式2'>英:row_style,类型:function({ row, rowIndex }) / object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_style'
                            size='small'></el-radio-group></div>
                    <!-- 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 -->
                    <div :style='样式1'>
                        <h4>单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 : </h4>
                        <spen :style='样式2'>英:cell_class_name,类型:function({ row, column, rowIndex, columnIndex }) /
                            string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_class_name'
                            size='small'></el-radio-group></div>
                    <!-- 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 -->
                    <div :style='样式1'>
                        <h4>单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 : </h4>
                        <spen :style='样式2'>英:cell_style,类型:function({ row, column, rowIndex, columnIndex }) / object,默认:—
                        </spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_style'
                            size='small'></el-radio-group></div>
                    <!-- 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 -->
                    <div :style='样式1'>
                        <h4>表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 : </h4>
                        <spen :style='样式2'>英:header_row_class_name,类型:function({ row, rowIndex }) / string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_row_class_name'
                            size='small'></el-radio-group></div>
                    <!-- 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 -->
                    <div :style='样式1'>
                        <h4>表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 : </h4>
                        <spen :style='样式2'>英:header_row_style,类型:function({ row, rowIndex }) / object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_row_style'
                            size='small'></el-radio-group></div>
                    <!-- 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 -->
                    <div :style='样式1'>
                        <h4>表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 : </h4>
                        <spen :style='样式2'>英:header_cell_class_name,类型:function({ row, column, rowIndex, columnIndex }) /
                            string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_cell_class_name'
                            size='small'></el-radio-group></div>
                    <!-- 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 -->
                    <div :style='样式1'>
                        <h4>表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 : </h4>
                        <spen :style='样式2'>英:header_cell_style,类型:function({ row, column, rowIndex, columnIndex }) /
                            object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_cell_style'
                            size='small'></el-radio-group></div>
                    <!-- 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 -->
                    <div :style='样式1'>
                        <h4>行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String
                            时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 : </h4>
                        <spen :style='样式2'>英:row_key,类型:function(row) / string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_key'
                            size='small'></el-radio-group></div>
                    <!-- 空数据时显示的文本内容， 也可以通过 #empty 设置 -->
                    <div :style='样式1'>
                        <h4>空数据时显示的文本内容， 也可以通过 #empty 设置 : </h4>
                        <spen :style='样式2'>英:empty_text,类型:string,默认:No Data</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.empty_text' size='small'>
                            <el-radio label="空的">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 -->
                    <div :style='样式1'>
                        <h4>是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 : </h4>
                        <spen :style='样式2'>英:default_expand_all,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.default_expand_all'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 -->
                    <div :style='样式1'>
                        <h4>可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 : </h4>
                        <spen :style='样式2'>英:expand_row_keys,类型:array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.expand_row_keys'
                            size='small'></el-radio-group></div>
                    <!-- 默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 -->
                    <div :style='样式1'>
                        <h4>默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 : </h4>
                        <spen :style='样式2'>英:default_sort,类型:object,默认:'descending'</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.default_sort'
                            size='small'></el-radio-group></div>
                    <!-- 溢出的 tooltip 的 effect -->
                    <div :style='样式1'>
                        <h4>溢出的 tooltip 的 effect : </h4>
                        <spen :style='样式2'>英:tooltip_effect,类型:string,默认:dark</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tooltip_effect'
                            size='small'></el-radio-group></div>
                    <!-- 溢出 tooltip 的选项，参见下述 tooltip 组件 -->
                    <div :style='样式1'>
                        <h4>溢出 tooltip 的选项，参见下述 tooltip 组件 : </h4>
                        <spen :style='样式2'>英:tooltip_options,类型:object,默认:object</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tooltip_options'
                            size='small'></el-radio-group></div>
                    <!-- 是否在表尾显示合计行 -->
                    <div :style='样式1'>
                        <h4>是否在表尾显示合计行 : </h4>
                        <spen :style='样式2'>英:show_summary,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_summary'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 显示摘要行第一列的文本 -->
                    <div :style='样式1'>
                        <h4>显示摘要行第一列的文本 : </h4>
                        <spen :style='样式2'>英:sum_text,类型:string,默认:Sum</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sum_text'
                            size='small'></el-radio-group></div>
                    <!-- 自定义的合计计算方法 -->
                    <div :style='样式1'>
                        <h4>自定义的合计计算方法 : </h4>
                        <spen :style='样式2'>英:summary_method,类型:function({ columns, data }),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.summary_method'
                            size='small'></el-radio-group></div>
                    <!-- 合并行或列的计算方法 -->
                    <div :style='样式1'>
                        <h4>合并行或列的计算方法 : </h4>
                        <spen :style='样式2'>英:span_method,类型:function({ row, column, rowIndex, columnIndex }),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.span_method'
                            size='small'></el-radio-group></div>
                    <!-- 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行 -->
                    <div :style='样式1'>
                        <h4>在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行 : </h4>
                        <spen :style='样式2'>英:select_on_indeterminate,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.select_on_indeterminate'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 展示树形数据时，树节点的缩进 -->
                    <div :style='样式1'>
                        <h4>展示树形数据时，树节点的缩进 : </h4>
                        <spen :style='样式2'>英:indent,类型:number,默认:16</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.indent'
                            size='small'></el-radio-group></div>
                    <!-- 是否懒加载子节点数据 -->
                    <div :style='样式1'>
                        <h4>是否懒加载子节点数据 : </h4>
                        <spen :style='样式2'>英:lazy,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.lazy' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 加载子节点数据的函数，lazy 为 true 时生效 -->
                    <div :style='样式1'>
                        <h4>加载子节点数据的函数，lazy 为 true 时生效 : </h4>
                        <spen :style='样式2'>英:load,类型:function(row, treeNode, resolve),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.load'
                            size='small'></el-radio-group></div>
                    <!-- 渲染嵌套数据的配置选项 -->
                    <div :style='样式1'>
                        <h4>渲染嵌套数据的配置选项 : </h4>
                        <spen :style='样式2'>英:tree_props,类型:object,默认:{ hasChildren: 'hasChildren', children: 'children' }
                        </spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tree_props'
                            size='small'></el-radio-group></div>
                    <!-- 设置表格单元、行和列的布局方式 -->
                    <div :style='样式1'>
                        <h4>设置表格单元、行和列的布局方式 : </h4>
                        <spen :style='样式2'>英:table_layout,类型:string,默认:fixed</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.table_layout'
                            size='small'></el-radio-group></div>
                    <!-- 总是显示滚动条 -->
                    <div :style='样式1'>
                        <h4>总是显示滚动条 : </h4>
                        <spen :style='样式2'>英:scrollbar_always_on,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.scrollbar_always_on'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。 -->
                    <div :style='样式1'>
                        <h4>是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。 : </h4>
                        <spen :style='样式2'>英:show_overflow_tooltip,类型:boolean \,默认:参考 tooltip-options</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_overflow_tooltip'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 确保主轴的最小尺寸，以便不超过内容 -->
                    <div :style='样式1'>
                        <h4>确保主轴的最小尺寸，以便不超过内容 : </h4>
                        <spen :style='样式2'>英:flexible,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.flexible' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);" >-------触发的事件 -----</h2>
                    <!-- 当用户手动勾选数据行的 Checkbox 时触发的事件 -->
                    <div :style='样式1'>
                        <h4>当用户手动勾选数据行的 Checkbox 时触发的事件 : </h4>
                        <spen :style='样式2'>英:select,类型:selection, row,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.select'
                            size='small'>
                            <el-radio label="手动勾选数据行">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当用户手动勾选全选 Checkbox 时触发的事件 -->
                    <div :style='样式1'>
                        <h4>当用户手动勾选全选 Checkbox 时触发的事件 : </h4>
                        <spen :style='样式2'>英:select_all,类型:selection,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.select_all'
                            size='small'>
                            <el-radio label="手动勾选全">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当选择项发生变化时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当选择项发生变化时会触发该事件 : </h4>
                        <spen :style='样式2'>英:selection_change,类型:selection,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.selection_change'
                            size='small'>
                            <el-radio label="选择项发生变化">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当单元格 hover 进入时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当单元格 hover 进入时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell_mouse_enter,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_mouse_enter'
                            size='small'>
                            <el-radio label="单元格hover进入">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当单元格 hover 退出时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当单元格 hover 退出时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell_mouse_leave,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_mouse_leave'
                            size='small'>
                            <el-radio label="单元格hover退出">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell_click,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_click'
                            size='small'>
                            <el-radio label="某个单元格被点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被双击击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被双击击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell_dblclick,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_dblclick'
                            size='small'>
                            <el-radio label="某个单元格被双击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被鼠标右键点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被鼠标右键点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell_contextmenu,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cell_contextmenu'
                            size='small'>
                            <el-radio label="某个单元格被鼠标右键点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row_click,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_click'
                            size='small'>
                            <el-radio label="某一行被点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被鼠标右键点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被鼠标右键点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row_contextmenu,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_contextmenu'
                            size='small'>
                            <el-radio label="某一行被鼠标右键点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被双击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被双击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row_dblclick,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.row_dblclick'
                            size='small'>
                            <el-radio label="某一行被双击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一列的表头被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一列的表头被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:header_click,类型:column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_click'
                            size='small'>
                            <el-radio label="某一列的表头被点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一列的表头被鼠标右键点击时触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一列的表头被鼠标右键点击时触发该事件 : </h4>
                        <spen :style='样式2'>英:header_contextmenu,类型:column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_contextmenu'
                            size='small'>
                            <el-radio label="某一列的表头被鼠标右键点击">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 当表格的排序条件发生变化的时候会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当表格的排序条件发生变化的时候会触发该事件 : </h4>
                        <spen :style='样式2'>英:sort_change,类型:{ column, prop, order },默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sort_change'
                            size='small'>
                            <el-radio label="表格的排序条件发生变化">有例子 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 -->
                    <div :style='样式1'>
                        <h4>column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 : </h4>
                        <spen :style='样式2'>英:filter_change,类型:filters,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filter_change'
                            size='small'></el-radio-group></div>
                    <!-- 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 -->
                    <div :style='样式1'>
                        <h4>当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 : </h4>
                        <spen :style='样式2'>英:current_change,类型:currentRow, oldCurrentRow,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.current_change'
                            size='small'></el-radio-group></div>
                    <!-- 当拖动表头改变了列的宽度的时候会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当拖动表头改变了列的宽度的时候会触发该事件 : </h4>
                        <spen :style='样式2'>英:header_dragend,类型:newWidth, oldWidth, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.header_dragend'
                            size='small'></el-radio-group></div>
                    <!-- 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） -->
                    <div :style='样式1'>
                        <h4>当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） : </h4>
                        <spen :style='样式2'>英:expand_change,类型:row, (expandedRows | expanded),默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.expand_change'
                            size='small'></el-radio-group></div>

                </el-scrollbar>

        </div>
    </div>

</div></template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('表格')
const 属性 = ref({
    data: '',//显示的数据
    height: '',//Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
    max_height: '',//Table 的最大高度。 合法的值为数字或者单位为 px 的高度。
    stripe: '',//是否为斑马纹 table
    border: '',//是否带有纵向边框
    size: '',//Table 的尺寸
    fit: '',//列的宽度是否自撑开
    show_header: '',//是否显示表头
    highlight_current_row: '',//是否要高亮当前行
    current_row_key: '',//当前行的 key，只写属性
    row_class_name: '',//行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
    row_style: '',//行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
    cell_class_name: '',//单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
    cell_style: '',//单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
    header_row_class_name: '',//表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
    header_row_style: '',//表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
    header_cell_class_name: '',//表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
    header_cell_style: '',//表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
    row_key: '',//行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
    empty_text: '',//空数据时显示的文本内容， 也可以通过 #empty 设置
    default_expand_all: '',//是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
    expand_row_keys: '',//可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
    default_sort: '',//默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序
    tooltip_effect: '',//溢出的 tooltip 的 effect
    tooltip_options: '',//溢出 tooltip 的选项，参见下述 tooltip 组件
    show_summary: '',//是否在表尾显示合计行
    sum_text: '',//显示摘要行第一列的文本
    summary_method: '',//自定义的合计计算方法
    span_method: '',//合并行或列的计算方法
    select_on_indeterminate: '',//在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行
    indent: '',//展示树形数据时，树节点的缩进
    lazy: '',//是否懒加载子节点数据
    load: '',//加载子节点数据的函数，lazy 为 true 时生效
    tree_props: '',//渲染嵌套数据的配置选项
    table_layout: '',//设置表格单元、行和列的布局方式
    scrollbar_always_on: '',//总是显示滚动条
    show_overflow_tooltip: '',//是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。
    flexible: '',//确保主轴的最小尺寸，以便不超过内容
    select: '',//当用户手动勾选数据行的 Checkbox 时触发的事件
    select_all: '',//当用户手动勾选全选 Checkbox 时触发的事件
    selection_change: '',//当选择项发生变化时会触发该事件
    cell_mouse_enter: '',//当单元格 hover 进入时会触发该事件
    cell_mouse_leave: '',//当单元格 hover 退出时会触发该事件
    cell_click: '',//当某个单元格被点击时会触发该事件
    cell_dblclick: '',//当某个单元格被双击击时会触发该事件
    cell_contextmenu: '',//当某个单元格被鼠标右键点击时会触发该事件
    row_click: '',//当某一行被点击时会触发该事件
    row_contextmenu: '',//当某一行被鼠标右键点击时会触发该事件
    row_dblclick: '',//当某一行被双击时会触发该事件
    header_click: '',//当某一列的表头被点击时会触发该事件
    header_contextmenu: '',//当某一列的表头被鼠标右键点击时触发该事件
    sort_change: '',//当表格的排序条件发生变化的时候会触发该事件
    filter_change: '',//column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
    current_change: '',//当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
    header_dragend: '',//当拖动表头改变了列的宽度的时候会触发该事件
    expand_change: '',//当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）


})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/gotable')

const 组件修改 = async () => {
    访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}

</script>
<style lang="scss"  scoped>h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}</style>
